<!DOCTYPE html>
<html lang="en">


<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人主页</title>
    <link rel="stylesheet" href="personal/submit.css">
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        .order_box_in {
            width: 285px;
            margin-left: 8px;
            float: left;
            border: 1px solid black;
            border-radius: 5px;
            cursor: pointer;
        }

        .order_box::after {
            content: '';
            display: block;
            clear: both;
        }

        .order_box_in {
            border: 1px solid #b29595;
            padding: 10px;
        }

        .addressname {
            height: 40px;
            font-weight: bold;
            color: black;
            text-align: center;
            font-size: 28px;
            padding: 5px;
        }

        .areatext {
            height: 20px;
            color: #968888;
            text-align: left;
            font-size: 20px;
            padding: 5px;
        }

        .addresstext {
            height: 20px;
            color: #968888;
            text-align: left;
            font-size: 20px;
            padding: 5px;
        }

        .addrname {
            height: 20px;
            color: #968888;
            text-align: left;
            font-size: 20px;
            padding: 5px;
        }

        .addrphone {
            height: 20px;
            color: #968888;
            text-align: left;
            font-size: 20px;
            padding: 5px;
        }
    </style>
</head>

<body>


<!-- 内容 -->
<div class="content">
    <div class="wrap">
        <div class="top-nav">
            <a href="#">首页</a>
            <span class="sep">/</span>
            <span>个人中心</span>
        </div>
        <div class="content-menu">
            <h3 class="title">订单中心</h3>
            <ul>
                <li><a href="javascript:;" _box="order">我的订单</a></li>

            </ul>
            <h3 class="title">个人中心</h3>
            <ul>
                <li><a href="javascript:;" _box="myinfo">我的信息</a></li>
                <li><a href="javascript:void(0);" _box="collect">我的收藏</a></li>
                <li><a href="javascript:void(0);" _box="evaluate">我的评价</a></li>
                <li><a href="javascript:void(0);" _box="address">收货地址</a></li>
            </ul>
            <h3 class="title">账户管理</h3>
            <ul>
                <li><a>修改密码</a></li>
            </ul>
        </div>

        <div class="content-main">
            <div _win="myinfo">
                <div class="layui-form" lay-filter="userinfo">
                    <div class="layui-input-inline">
                        <img src="" id="userimg"
                             style="height: 100px;width: 100px;border-radius: 50%;cursor: pointer;">
                        <input type="hidden" name="imgurl" class="layui-input">
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-inline">
                            <input type="text" readonly name="username" class="layui-input">
                        </div>

                    </div>


                    <div class="layui-form-item">
                        <label class="layui-form-label">昵称</label>
                        <div class="layui-input-inline">
                            <input type="text" readonly name="nickname" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">联系电话</label>
                        <div class="layui-input-inline">
                            <input type="text" name="tel" placeholder="请输入手机号" lay-verify="required|phone"
                                   class="layui-input">
                        </div>
                    </div>
                    <button type="button" lay-submit lay-filter="saveuser">提交</button>
                </div>
            </div>


            <div _win="address">
<!--                <div class="user">-->
                    <div class="order_box" name="addressbox">
<!--                        <div class="order_box_in">-->
<!--                            <div class="addressname"></div>-->
<!--                            <div class="areatext"></div>-->
<!--                            <div class="addresstext"></div>-->
<!--                            <div class="">-->
<!--                                <span class="addname"></span>-->
<!--                                <span class="addphone"></span>-->
<!--                            </div>-->
<!--                            <div class="">-->
<!--                                <input _addrid="" type="checkbox">-->
<!--                                <button type="button" _addrid name="edit"></button>-->
<!--                                <button type="button" _addrid name="delete"></button>-->
<!--                            </div>-->
<!--                        </div>-->
                    </div>
<!--                </div>-->
            </div>


        </div>
    </div>
</div>

<div style="display: none" id="addAddressWin" class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">地址名称</label>
        <div class="layui-input-inline">
            <input type="text" name="addressname" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">省份</label>
        <div class="layui-input-inline">
            <select name="provincecode" lay-filter="provincecode"></select>
            <input type="hidden" name="province">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">城市</label>
        <div class="layui-input-inline">
            <select name="citycode" lay-filter="citycode"></select>
            <input type="hidden" name="city">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">区划</label>
        <div class="layui-input-inline">
            <select name="areacode" lay-filter="areacode"></select>
            <input type="hidden" name="area">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">详细地址</label>
        <div class="layui-input-inline">
            <input type="text" name="address" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">联系人</label>
        <div class="layui-input-inline">
            <input type="text" name="receiver" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电话</label>
        <div class="layui-input-inline">
            <input type="text" name="phone" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <button type="button" lay-submit lay-filter="addAddressBtn">提交</button>
    </div>
</div>


<div style="display: none" id="editAddressWin" class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">地址名称</label>
        <div class="layui-input-inline">
            <input type="text" name="addressname" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">省份</label>
        <div class="layui-input-inline">
            <select name="provincecode" lay-filter="provincecode"></select>
            <input type="hidden" name="province">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">城市</label>
        <div class="layui-input-inline">
            <select name="citycode" lay-filter="citycode"></select>
            <input type="hidden" name="city">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">区划</label>
        <div class="layui-input-inline">
            <select name="areacode" lay-filter="areacode"></select>
            <input type="hidden" name="area">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">详细地址</label>
        <div class="layui-input-inline">
            <input type="text" name="address" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">联系人</label>
        <div class="layui-input-inline">
            <input type="text" name="receiver" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电话</label>
        <div class="layui-input-inline">
            <input type="text" name="phone" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <button type="button" lay-submit lay-filter="editAddressBtn">保存</button>
    </div>
</div>

<!--    <script src="personal/submit.js"></script>-->
<!--    <script src="personal/time.js"></script>-->
<script src="layui/layui.all.js"></script>


<script type="text/html" id="addressitem">
    <div class='order_box_in layui-form'>
        <div class='addressname' style="">

        </div>
        <div  style="margin-top:8px">
            地址:<span class="areatext"></span>
        </div>
        <div class='' style="margin-top:8px;">
            详细地址:<span class="addresstext"></span>
        </div>
        <div class='layui-row' style="margin-top:8px;">
            <div class=' layui-col-md6'>
                联系人:<span class="addrname"></span>
            </div>
            <div class=' layui-col-md6'>
                联系电话:<span class="addrtel"></span>
            </div>
        </div>
        <div  style="margin-top:8px" class="layui-row">
            <div class="layui-col-md6 " >
                <input type='checkbox'  name="default" value="1" _addrid=''>
            </div>
            <div class="layui-col-md6 addressbtn" style="text-align: right;">
                <button type='button' _addrid name='edit'
                        class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal" editAddress>编辑
                </button>
                <button type='button' _addrid name='delete'
                        class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger">删除
                </button>
            </div>
        </div>
    </div>
</script>
<script type="text/html" id="addAddress">
    <div class='order_box_in layui-form' addAddress style="text-align: center;line-height: 170px;font-size: 30px">
        +
    </div>
</script>
<script>
    //点击左侧组件 _box
    //在右侧显示对应的窗口信息  _win
    const $ = layui.$;
    const form = layui.form;
    const upload = layui.upload;
    //初始状态
    $("[_win]").hide();
    $("[_win]:first").show();
    showmyinfo();
    //事件监听
    $("[_box]").click(function () {
        $("[_win]").hide();
        let val = $(this).attr("_box");
        if (val == 'myinfo') {
            showmyinfo();
        }
        $("[_win='" + val + "']").show();
    });

    function renderAddress(data) {
        layui.laytpl(addressTpl).render(data, function (html) {
            $("[name='addressbox']").append(html);
        });
        form.render();
    }

    function showmyinfo() {
        $.ajax({
            url: 'user/getuserinfo',
            success: function (result) {
                let data = result.data;
                let code = result.code;
                let msg = result.msg;
                if (code == 401) {
                    layer.msg(msg, {icon: 1});
                    setTimeout(function () {
                        location.href = "shopping/login";
                    }, 2000);
                } else if (code != 200) {
                    layer.msg(msg, {icon: 2});
                } else {
                    form.val('userinfo', data);
                    $("[name='userimg']").attr("src", data.imgurl);
                }
            }
        });
    }

    form.on('submit(saveuser)', function (obj) {
        $.ajax({
            url: 'user/edit',
            data: obj.field, // 使用正确数据
            success: function (result) {
                layer.msg("保存成功", {icon: 1, time: 1800});
            }
        });
        return false;
    });
    upload.render({
        elem: '#userimg',
        url: 'file/upload',
        done: function (res, index, upload) {
            layer.msg("上传成功", {icon: 1, time: 1500});
            let imgurl = res.data[0].src;
            $('#userimg').attr("src", imgurl);
            $("[name='imgurl']").val(imgurl);

        }
    });

    $("[name='addressbox']").on("click", "[addAddress]", function () {
        layer.open({
            type: 1,
            area: ['400px', '600px'],
            content: $('#addAddressWin')

        })
    });
    $("[name='edit']").on("click", function () {
        layer.open({
            type: 1,
            area: ['400px', '600px'],
            content: $('#editAddressWin')

        })
    });

    showArea(100000, $("[name='provincecode']"));

    function showArea(code, $dom) {
        $.ajax({
            url: "https://restapi.amap.com/v3/config/district",
            data: {key: 'd5e466c74f37e2b1f89163a68a161ea7', keywords: code},
            success: function (result) {
                let children = result.districts[0].districts;
                $dom.empty();
                $dom.append($("<option value=''></option>"));
                for (let i = 0; i < children.length; i++) {
                    $dom.append($("<option value='" + children[i].adcode + "'>" + children[i].name + "</option>"));
                }
                form.render("select");
            }
        });
    }
    form.on('select(provincecode)', function (data) {
        let provincecode = data.value; //得到被选中的值
        showArea(provincecode, $("[name='citycode']"));
        let provincename = $(data.othis).find("input").val();
        $("[name='province']").val(provincename);
    });
    form.on('select(citycode)', function (data) {
        let citycode = data.value;
        showArea(citycode, $("[name='areacode']"));
        let cityname = $(data.othis).find("input").val();
        $("[name='city']").val(cityname);
    });
    form.on('select(areacode)', function (data) {
        let areaname = $(data.othis).find("input").val();
        $("[name='area']").val(areaname);
    });

    //新增地址保存
    form.on("submit(addAddressBtn)", function (obj) {
        $.ajax({
            url: 'address/add',
            data: obj.field,
            success: function (result) {
                layer.closeAll();
                $("[name='addressbox']").empty();
                showAddress();
                layer.msg("添加成功", {icon: 1});
            }
        });
        return false;
    });
    form.on("submit(editAddressBtn)", function (obj) {
        $.ajax({
            url: 'address/edit',
            data: obj.field,
            success: function (result) {
                layer.closeAll();
                $("[name='addressbox']").empty();
                showAddress();
                layer.msg("保存成功", {icon: 1});
            }
        });
        return false;
    });




    $("[name='addressbox']").on('click', '[name="delete"]', function () {
        let id = $(this).attr('_addrid');
        layer.confirm('确认删除？', function () {
            $.ajax({
                url: 'address/delete',
                data: {id: id},
                success: function () {
                    $(`[_addrid="${id}"]`).closest('.order_box_in').remove();
                }
            });
        });
    });

    showAddress();

    function showAddress() {
        $.ajax({
            url: 'address/getaddressbyuserid',
            success: function (result) {
                let data = result.data;
                for (let i = 0; i < data.length; i++) {
                    let itemtext = $("#addressitem").text();
                    let $item = $(itemtext);
                    $item.find(".addressname").text(data[i].addressname);
                    $item.find(".areatext").text(data[i].province + "-" + data[i].city + "-" + data[i].area);
                    $item.find(".addresstext").text(data[i].addressname);
                    $item.find(".addrphone").text(data[i].phone);
                    $item.find(".addrname").text(data[i].receiver);
                    if (data[i].isdefault == 1)
                        $item.find("[type='checkbox']").prop("checked", true);
                    $("[name='addressbox']").append($item);
                }
                if (data.length < 6) {
                    let itemtext = $("#addAddress").text();
                    let $item = $(itemtext);
                    $("[name='addressbox']").append($item);
                }
            }
        });
    }
</script>
</body>

</html>